<template>
  <div>
    <ul class="tabcontrol">
      <li
        v-for="(item, index) in titles"
        :key="index"
        @click="itemclick(index)"
        :class="{ active: currentindex == index }"
        class="tabitem"
      >
        <span>
          {{ item }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentindex: 0,
      currentType: "pop",
    };
  },
  props: {
    titles: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    itemclick(index) {
      this.currentindex = index;
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$emit("tabclick", this.currentType);
    },
  },
};
</script>
<style scoped>
.active {
  color: red;
}
.tabcontrol {
  display: flex;
  text-align: center;
  height: 44px;
  line-height: 44px;
}
.tabitem {
  flex: 1;
}
.active span {
  width: 100%;
  padding: 10px;
  border-bottom: 2px solid red;
  /* padding-bottom: 10px; */
}
</style>
